<template>
  <div class="invitation">
    <div class="topTips">
      <img src='../../../../public/images/qt_32.png'/>欢迎阅读我发布的帖子
    </div>
    <div class="contentNav">
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
	      <van-list
	        v-model="loading"
	        :finished="finished"
	        @load="onLoad"
	        :immediate-check="false"
          finished-text="没有更多了">
        
          <div class="tie" v-for="(item,index) in order" :key='index' >
            <div class="top">
              <img :src="item.userInfo.userPhoto" class="pic l"/>
              <div class="txt1 l">
                <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="clear"></div></div>
                <div class="time">{{item.dbCreateTime}}</div>
              </div>
              <!-- <img src="../../../../public/images/qt_86.png" class="btn_gz r" @click='del(item.postId)'/> -->
              <div class="clear"></div>
            </div>
            <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click='item.txtStatus=false'>查看更多>></span></div>
            <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
            <div class="pic">
              <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
            </div>
            <div class="bottom mt-30">
              <div class="peopleNum l">868人看到</div>
              <div class="otherNum2 r"><img src="../../../../public/images/qt_80.png"/>{{item.thumbUpNum}}</div>
              <div class="otherNum1 r mr-50"><img src="../../../../public/images/qt_78.png"/>{{item.commentNum}}</div>
              <div class="clear"></div>
            </div>
          </div>
        
        </van-list>
      </div>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
export default {
  props:['userId'],
  data(){
    return{
      loading: false,
      finished: false,
      isLoading:false,
      sizes:10,
      pages:1,
      order:[]
    }
  },
  created(){
    this.getMessage();
    console.log(this.userId)
  },
  methods:{
    getMessage(){
      this.pages=1;
      this.$get(this.$api.user.posts,{page:this.pages,size:this.sizes,userId:this.userId}).then(data=>{
        data.data.curPageData.forEach((item,index,array)=>{
          array[index]=JSON.parse(item.content);
          array[index].postId=item.postId;
          array[index].thumbUpNum=item.thumbUpNum;
          array[index].commentNum=item.commentNum;
          array[index].userInfo=item.userInfo;
          array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
          array[index].txtStatus=true;
          array[index].images=JSON.parse(item.images);
        })
        this.order=data.data.curPageData;
        this.pages=2;
      })
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.posts,{page:this.pages,size:this.sizes,userId:this.userId}).then(data=>{
          if((Number(this.pages)-1)*this.sizes<data.data.totalNum){
            data.data.curPageData.forEach((item,index,array)=>{
              array[index]=JSON.parse(item.content);
              array[index].postId=item.postId;
              array[index].thumbUpNum=item.thumbUpNum;
              array[index].commentNum=item.commentNum;
              array[index].userInfo=item.userInfo;
              array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
              array[index].txtStatus=true;
              array[index].images=JSON.parse(item.images);
            })
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          this.pages++;
        })
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.get_message();
      }, 500);
    },
    del(id){
      this.$dialog.confirm({
        title: '',
        message: '确认删除么？'
      }).then(() => {
        // on confirm
        this.$toast.success({message:'删除成功',duration:500});
        this.getMessage();
      }).catch(() => {
        // on cancel
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .topTips{height: 0.9rem;background-color: #fff;vertical-align: middle;color: #FEA64E;font-size: 0.3rem;line-height: 0.9rem;margin-top: 0.3rem;}
  .topTips img{width: 0.36rem;height: 0.32rem;display: inline-block;margin-left:0.32rem;margin-right: 0.13rem;}
  .myInvitation{height: 1rem;background-color: #fff;font: 0.3rem/1rem '微软雅黑';color: #999999;margin-left: 0.3rem;}
  .tie{padding:0.3rem 0.3rem 0.3rem 0.3rem;position: relative;background-color: #fff;margin-bottom: 0.3rem;}
  .tie .top .pic{display: block;width: 0.8rem;height: 0.8rem;border-radius: 50%;overflow: hidden;}
  .tie .top .txt1{margin-left: 0.25rem;}
  .tie .top .txt1 .title .name{font: 0.32rem/0.35rem '微软雅黑';color: #4AACE9;width: 1.5rem;float: left;height: 0.45rem;}
  .tie .top .txt1 .time{font:0.24rem/0.35rem '微软雅黑';color: #999999;}
  .tie .top .btn_gz{width: 0.27;height: 0.28rem;display: block;margin-top: 0.26rem;}
  .tie .txt2{font: 0.32rem/0.4rem '微软雅黑';color: #333333;margin: 0.3rem 0;}
  .tie .txt2 .more{color: #4AACE9;margin-left: 0.2rem;font: 0.3rem/0.4rem '微软雅黑';}
  .tie .pic img{display: inline-block;width: 2.18rem;margin:0.04rem 0.05rem 0.1rem 0.05rem;}
  .tie .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .tie .bottom .otherNum1{float: right;}
  .tie .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;margin-bottom: 0.05rem;}
  .contentNav{height: calc(100vh - 5rem - 44px - 1.2rem);overflow-y: scroll;}
</style>
